CSS Logical Properties Nivå 2: Bygg en virkelig global web med forbedret støtte for skrivemodus

I tiår har webutviklere bygget layouter med et vokabular forankret i den fysiske verden: top, bottom, left, og right. Vi satte en margin-left, en padding-top og en border-right. Denne mentale modellen fungerte godt da nettet hovedsakelig var et medium som gikk fra venstre mot høyre og topp til bunn. Men nettet er globalt. Det er en plattform for alle språk og kulturer, hvorav mange ikke følger denne enkle retningsflyten.

Språk som arabisk og hebraisk skrives fra høyre til venstre. Tradisjonell japansk og kinesisk kan skrives vertikalt, fra topp til bunn og høyre til venstre. Å tvinge en fysisk, venstre-til-høyre CSS-modell på disse skrivesystemene resulterer i ødelagte layouter, en frustrerende brukeropplevelse og et fjell av kodeoverstyringer. Det er her CSS Logical Properties and Values kommer inn, og representerer et fundamentalt paradigmeskifte fra fysiske retninger til flyt-relative, logiske retninger. Mens Nivå 1 la grunnlaget, fullfører CSS Logical Properties Nivå 2 bildet, og gir oss verktøyene vi trenger for å bygge virkelig universelle, skrivemodus-bevisste brukergrensesnitt.

Denne omfattende guiden vil ta deg med på et dypdykk i forbedringene som Nivå 2 bringer med seg. Vi starter med en oppfriskning av kjernekonseptene, utforsker deretter de nye egenskapene og verdiene som fyller hullene, og til slutt setter vi alt ut i praksis ved å bygge en komponent som tilpasser seg sømløst til enhver skrivemodus. Forbered deg på å endre måten du tenker på CSS-layout for alltid.

En rask oppfriskning: Kjernekonseptene i logiske egenskaper (Nivå 1)

Før vi kan sette pris på tilleggene i Nivå 2, må vi ha en solid forståelse av grunnlaget som ble lagt av Nivå 1. Hele systemet er bygget på to nøkkelkonsepter: skrivemodus og de resulterende blokk- og linjeaksene.

De fire skrivemodusene

CSS-egenskapen writing-mode bestemmer retningen teksten layoutes i. Selv om vi ofte tar standardverdien for gitt, finnes det flere verdier som fundamentalt endrer hvordan innholdet flyter på siden:

• horizontal-tb: Dette er standard for de fleste vestlige språk. Teksten flyter horisontalt (linjeakse) fra venstre til høyre (eller høyre til venstre basert på retning), og linjer stables fra topp til bunn (blokkakse).
• vertical-rl: Brukes for tradisjonell østasiatisk typografi (f.eks. japansk, kinesisk). Teksten flyter vertikalt fra topp til bunn (linjeakse), og linjer stables fra høyre til venstre (blokkakse).
• vertical-lr: Ligner på den over, men linjer stables fra venstre til høyre (blokkakse). Mindre vanlig, men brukt i visse sammenhenger som mongolsk skrift.
• sidelong-rl / sidelong-lr: Disse er for spesifikke bruksområder der du vil legge glyfer på siden. De er mindre vanlige i generelt webinnhold.

Det avgjørende konseptet: Blokk- vs. linjeakse

Dette er det viktigste konseptet å forstå. I en logisk verden slutter vi å tenke på 'vertikal' og 'horisontal' og begynner å tenke i termer av blokk- og linjeaksene. Deres orientering avhenger helt av writing-mode.

• Linjeaksen er retningen teksten flyter i innenfor en enkelt linje.
• Blokkaksen er retningen nye linjer stables i.

La oss se hvordan dette utspiller seg:

• På standard engelsk (writing-mode: horizontal-tb): Linjeaksen går horisontalt, og blokkaksen går vertikalt.
• På tradisjonell japansk (writing-mode: vertical-rl): Linjeaksen går vertikalt, og blokkaksen går horisontalt.

Fordi disse aksene kan bytte plass, blir egenskaper som width og height tvetydige. Er width størrelsen langs den horisontale aksen eller linjeaksen? Logiske egenskaper løser denne tvetydigheten. Vi har nå start og end for hver akse:

• block-start: 'Toppen' på engelsk, men 'høyre' på vertikal japansk.
• block-end: 'Bunnen' på engelsk, men 'venstre' på vertikal japansk.
• inline-start: 'Venstre' på engelsk, men 'toppen' på vertikal japansk.
• inline-end: 'Høyre' på engelsk, men 'bunnen' på vertikal japansk.

Mapping av fysiske til logiske egenskaper (Nivå 1)

Nivå 1 introduserte et omfattende sett med mappings fra fysiske til logiske egenskaper. Her er noen sentrale eksempler:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (for positioning) → inset-inline-start / inset-inline-end
• top / bottom (for positioning) → inset-block-start / inset-block-end

Nivå 1 ga oss også nyttige kortformer som margin-inline (for start og end) og padding-block (for start og end).

Velkommen til Nivå 2: Hva er nytt og hvorfor det er viktig

Selv om Nivå 1 var et monumentalt skritt fremover, etterlot det noen merkbare hull. Visse grunnleggende CSS-egenskaper som float, clear og resize hadde ingen logiske ekvivalenter. Videre kunne egenskaper som border-radius ikke kontrolleres logisk, noe som tvang utviklere til å falle tilbake på fysiske egenskaper for finkornet styling. Dette betydde at du kunne bygge en layout 90% av veien med logiske egenskaper, men fortsatt ville trenge fysiske overstyringer for forskjellige skrivemoduser, noe som delvis motvirket hensikten.

CSS Logical Properties Nivå 2 tar tak i disse manglene direkte. Det handler ikke om å introdusere et radikalt nytt system, men om å fullføre det som ble startet i Nivå 1. Det oppnår dette på to hovedmåter:

1. Introdusere nye logiske egenskaper og verdier for eldre CSS-funksjoner som var iboende fysiske (som float).
2. Legge til logiske egenskaps-mappings for komplekse kortformer som tidligere ble ignorert (som border-radius).

Med Nivå 2 er visjonen om et fullstendig flyt-relativt stylingsystem nesten komplett, noe som lar oss bygge komplekse, vakre og robuste komponenter som fungerer overalt, for alle, uten hacks eller overstyringer.

Dypdykk: Nye logiske verdier og egenskaper i Nivå 2

La oss utforske de mest betydningsfulle tilleggene som Nivå 2 bringer til vårt utviklerverktøysett. Dette er verktøyene som fyller hullene og muliggjør virkelig universelt komponentdesign.

Float og Clear: Den logiske revolusjonen

Egenskapen float har vært en hjørnestein i CSS-layout i årevis, men verdiene, left og right, er definisjonen på fysisk retning. Hvis du flyter et bilde til left for et avsnitt på engelsk, ser det riktig ut. Men bytt dokumentretningen til høyre-til-venstre (RTL) for arabisk, og bildet er nå på 'feil' side av tekstblokken. Det burde være til høyre, som er starten på linjen.

Nivå 2 introduserer to nye, logiske nøkkelord for float-egenskapen:

• float: inline-start; Dette flyter et element til starten av linjeretningen. I LTR-språk er dette venstre. I RTL-språk er det høyre. I en vertical-rl skrivemodus er det toppen.
• float: inline-end; Dette flyter et element til slutten av linjeretningen. I LTR er dette høyre. I RTL er det venstre. I vertical-rl er det bunnen.

Tilsvarende får clear-egenskapen, som brukes til å kontrollere tekstbryting rundt flytende elementer, sine logiske motstykker:

• clear: inline-start; Klarerer flyt på inline-start-siden.
• clear: inline-end; Klarerer flyt på inline-end-siden.

Dette er en 'game-changer'. Du kan nå lage klassiske bilde-med-tekstbryting-layouter som automatisk tilpasser seg enhver språkretning uten en eneste ekstra linje med CSS.

Forbedret kontroll med logisk størrelsesendring

Egenskapen resize, som ofte brukes på en textarea, lar brukere endre størrelsen på et element. Dens tradisjonelle verdier er horizontal, vertical og both. Men hva betyr 'horizontal' i en vertikal skrivemodus? Det betyr fortsatt å endre størrelse langs den fysiske horisontale aksen, noe som kanskje ikke er det brukeren eller designeren har tenkt. Brukeren ønsker sannsynligvis å endre størrelsen på elementet langs linjeaksen for å gjøre linjene lengre eller kortere.

Nivå 2 introduserer logiske verdier for resize:

• resize: inline; Tillater størrelsesendring langs linjeaksen.
• resize: block; Tillater størrelsesendring langs blokkaksen.

Ved å bruke resize: block; på en textarea på engelsk kan brukeren gjøre den høyere. I en vertikal skrivemodus lar det brukeren gjøre den bredere (som er blokkretningen). Det bare fungerer.

`caption-side`: Logisk posisjonering for tabelltekster

Egenskapen caption-side bestemmer plasseringen av en tabells caption. De gamle verdiene var top og bottom. Igjen er disse fysiske. Hvis en designers intensjon er å plassere bildeteksten 'før' tabellens innhold, fungerer top for horisontale skrivemoduser. Men i en vertical-rl-modus er 'starten' av blokkflyten på høyre side, ikke på toppen.

Nivå 2 gir den logiske løsningen:

• caption-side: block-start; Plasserer bildeteksten i starten av blokkflyten.
• caption-side: block-end; Plasserer bildeteksten på slutten av blokkflyten.

`text-align`: En fundamental logisk verdi

Selv om verdiene start og end for text-align har eksistert en stund, er de en sentral del av filosofien bak logiske egenskaper og verdt å forsterke. Å bruke text-align: left; er en vanlig feil som umiddelbart forårsaker layoutproblemer i RTL-språk. Den korrekte, moderne tilnærmingen er å alltid bruke:

• text-align: start; Justerer tekst til starten av linjeretningen.
• text-align: end; Justerer tekst til slutten av linjeretningen.

Kronjuvelen i Nivå 2: Logisk `border-radius`

Kanskje det mest betydningsfulle og kraftfulle tillegget i Nivå 2 er settet med egenskaper for å kontrollere border-radius logisk. Tidligere, hvis du ønsket at et kort skulle ha avrundede hjørner bare øverst, ville du brukt border-top-left-radius og border-top-right-radius. Dette bryter fullstendig sammen i en vertikal skrivemodus, der de 'øverste' hjørnene nå er start-start- og end-start-hjørnene.

Nivå 2 introduserer fire nye langhåndsegenskaper som mapper til de fire hjørnene av et element på en flyt-relativ måte. Navnekonvensjonen er border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Hjørnet der block-start- og inline-start-sidene møtes.
• border-start-end-radius: Hjørnet der block-start- og inline-end-sidene møtes.
• border-end-start-radius: Hjørnet der block-end- og inline-start-sidene møtes.
• border-end-end-radius: Hjørnet der block-end- og inline-end-sidene møtes.

Dette kan være vanskelig å visualisere i begynnelsen, så la oss kartlegge det for forskjellige skrivemoduser:

Mapping av `border-radius` i `writing-mode: horizontal-tb` (f.eks. engelsk)

• border-start-start-radius mapper til top-left-radius.
• border-start-end-radius mapper til top-right-radius.
• border-end-start-radius mapper til bottom-left-radius.
• border-end-end-radius mapper til bottom-right-radius.

Mapping av `border-radius` i `writing-mode: horizontal-tb` med `dir="rtl"` (f.eks. arabisk)

Her er linjeretningen snudd.

• border-start-start-radius mapper til top-right-radius. (Block-start er topp, inline-start er høyre).
• border-start-end-radius mapper til top-left-radius.
• border-end-start-radius mapper til bottom-right-radius.
• border-end-end-radius mapper til bottom-left-radius.

Mapping av `border-radius` i `writing-mode: vertical-rl` (f.eks. japansk)

Her er begge aksene rotert.

• border-start-start-radius mapper til top-right-radius. (Block-start er høyre, inline-start er topp).
• border-start-end-radius mapper til bottom-right-radius.
• border-end-start-radius mapper til top-left-radius.
• border-end-end-radius mapper til bottom-left-radius.

Ved å bruke disse nye egenskapene kan du definere hjørneradier som er semantisk knyttet til innholdsflyten, ikke den fysiske skjermen. Et 'start-start'-hjørne vil alltid være det korrekte hjørnet, uavhengig av språk eller tekstretning.

Praktisk implementering: Bygge en global-klar komponent

Teori er flott, men la oss se hvordan dette fungerer i praksis. Vi skal bygge en enkel profilkort-komponent, først ved hjelp av de gamle fysiske egenskapene, og deretter refaktorere den til å bruke moderne logiske egenskaper fra både Nivå 1 og Nivå 2.

Kortet vil ha et bilde flytende til den ene siden, en tittel, litt tekst, og en dekorativ kantlinje og avrundede hjørner.

Den 'gamle' måten: Et skjørt, fysisk-egenskapskort

Slik kunne vi ha stylet dette kortet for noen år siden:

/* --- CSS (Fysiske egenskaper) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

I en standard engelsk LTR-kontekst ser dette greit ut. Men hvis vi plasserer dette inne i en container med dir="rtl" eller writing-mode: vertical-rl, bryter layouten sammen. Den dekorative kantlinjen er på feil side, avataren er på feil side, margen er feil, og de avrundede hjørnene er feilplassert.

Den 'nye' måten: Et robust, logisk-egenskapskort

La oss nå refaktorere den samme komponenten ved hjelp av logiske egenskaper. Vi vil utnytte egenskaper fra både Nivå 1 og de nye tilleggene fra Nivå 2.

/* --- CSS (Logiske egenskaper) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` shorthand is already logical! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Level 2 Power! */

  border-end-start-radius: 8px; /* Level 2 Power! */

}

.logical-card .avatar {

  float: inline-start; /* Level 2 Power! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Test og verifisering

Med denne nye CSS-en kan du plassere komponenten i hvilken som helst container, og den vil automatisk tilpasse seg.

• I en LTR-kontekst: Den vil se identisk ut med den opprinnelige fysiske versjonen.
• I en RTL-kontekst (dir="rtl"): Avataren vil flyte til høyre, margen vil være på venstre side, den dekorative kantlinjen vil være på høyre side, og teksten vil være start-justert (til høyre). De avrundede hjørnene vil korrekt være øverst til høyre og nederst til høyre. Det bare fungerer.
• I en vertikal kontekst (writing-mode: vertical-rl): Kortets 'bredde' (nå dens vertikale inline-size) vil være 300px. Avataren vil flyte til 'toppen' (inline-start) med en marg på sin 'bunn' (inline-end). Den dekorative kantlinjen vil være på høyre side (inline-start), og de avrundede hjørnene vil være øverst til høyre og øverst til venstre. Komponenten har fullstendig reorientert seg korrekt uten noen media queries eller overstyringer.

Nettleserstøtte og fallbacks

Dette høres fantastisk ut, men hva med nettleserstøtte? Den gode nyheten er at støtten for Nivå 1 logiske egenskaper er utmerket i alle moderne nettlesere. Du kan og bør bruke egenskaper som margin-inline-start og padding-block i dag.

Støtten for de nyere Nivå 2-funksjonene blir raskt bedre, men er ennå ikke universell. De logiske verdiene for float, clear og resize er godt støttet. De logiske border-radius-egenskapene er de nyeste og kan fortsatt være bak funksjonsflagg eller i nyere nettleserversjoner. Som alltid bør du konsultere ressurser som MDN Web Docs eller CanIUse.com for de mest oppdaterte kompatibilitetsdataene.

Strategier for progressiv forbedring

Siden CSS er designet for å være robust, kan vi enkelt tilby fallbacks for eldre nettlesere. Kaskaden vil sikre at hvis en nettleser ikke forstår en logisk egenskap, vil den simpelthen ignorere den og bruke den fysiske egenskapen som er definert før den.

Slik kan du skrive CSS som er klar for fallbacks:

.card {

  /* Fallback for eldre nettlesere */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderne logisk egenskap som vil overstyre fallbacken */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Denne tilnærmingen sikrer en solid grunnleggende opplevelse for alle, samtidig som den gir den forbedrede, adaptive layouten for brukere på moderne nettlesere. For prosjekter som ikke trenger å støtte flere skrivemoduser, kan dette være overflødig. Men for enhver global applikasjon, designsystem eller tema, er dette en robust og fremtidssikker strategi.

Fremtiden er logisk: Utover Nivå 2

Overgangen fra en fysisk til en logisk tankegang er en av de viktigste endringene i moderne CSS. Den samkjører stylingspråket vårt med realiteten av et mangfoldig, globalt nett. Det flytter oss bort fra skjøre, skjermorienterte hacks mot robust, innholdsorientert design.

Finnes det fortsatt hull? Noen få. Logiske verdier for egenskaper som background-position eller gradienter diskuteres fortsatt. Men med utgivelsen av Nivå 2 kan de aller fleste daglige layout- og stylingoppgaver nå utføres med en rent logisk tilnærming.

Oppfordringen til utviklere er klar: begynn å bruke logiske egenskaper som standard. Gjør inline-size til ditt førstevalg i stedet for width. Bruk margin-inline i stedet for å sette venstre og høyre marg separat. Dette handler ikke bare om å støtte forskjellige språk; det handler om å skrive bedre, mer robust CSS. En komponent bygget med logiske egenskaper er iboende mer gjenbrukbar og tilpasningsdyktig, enten den brukes i en LTR-, RTL- eller vertikal layout. Det er rett og slett bedre ingeniørarbeid.

Konklusjon: Omfavn flyten

CSS Logical Properties Nivå 2 er ikke bare en samling nye funksjoner; det er fullføringen av en visjon. Det gir de siste, avgjørende brikkene som trengs for å bygge layouter som respekterer den naturlige flyten i innholdet, uansett hva den flyten måtte være. Ved å omfavne egenskaper som float: inline-start og border-start-start-radius, hever vi håndverket vårt fra å bare posisjonere bokser på en skjerm til å designe virkelig globale, inkluderende og fremtidssikre webopplevelser.

Neste gang du starter et nytt prosjekt eller bygger en ny komponent, ta en pause før du skriver margin-left. Spør deg selv: 'Mener jeg venstre, eller mener jeg starten?' Ved å gjøre den lille mentale endringen, vil du bidra til et mer tilpasningsdyktig og tilgjengelig nett for alle, overalt.